<template>

	<div>
		<van-nav-bar
		  title="选择品类品牌"
		  left-text="返回"
		   
		  left-arrow
		  @click-left="onClickLeft" 
		
		/>
		
		<!-- <van-sidebar v-model="activeKey">
  <van-sidebar-item title="复古包" /><van-cell value="朗格" size='large' to='/Blog' />
  
  <van-sidebar-item title="手提包" /><van-cell value="爱彼" size='large' to='/Blog' />
  <van-sidebar-item title="单肩包" /><van-cell value="宝诗龙" size='large' to='/Blog' />
                    <div class="van-ellipsis"  to='/Blog'>这是一段宽度限的文字</div>
</van-sidebar> -->
<van-tree-select
  :items="items"
  :main-active-index="mainActiveIndex"
  :active-id="activeId"
  @click-nav="onClickNav"
  @click-item="onClickItem"
	
/>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	export default{
		 methods: {
		  onClickLeft() {
		    
					this.$router.go(-1)
				
				
		        },
			  onClickNav(index) {
		    this.mainActiveIndex =index;
		  },
		  onClickItem(data) {
		    this.activeId = data.id;
			
		  }
		 
		},
		name:'pler',
		  data() {
    return {
      // activeKey: 0
			 items:[{
    // 导航名称
         text: '复古包',
    // 该导航下所有的可选项
    children: [
      {
        // 名称
        text: 'ALange & Sohhe/朗格',
        // id，作为匹配选中状态的标识
        id: 1,
        // 禁用选项
        // disabled: true
      },
      {
        text: 'Audemars Piguet/爱彼',
        id: 2
      },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			},
			{
			  // 名称
			  text: 'ALange & Sohhe/朗格',
			  // id，作为匹配选中状态的标识
			  id: 4,
			  // 禁用选项
			  // disabled: true
			},
			{
			  text: 'Audemars Piguet/爱彼',
			  id: 5
			},
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 6
			},
			{
			  // 名称
			  text: 'ALange & Sohhe/朗格',
			  // id，作为匹配选中状态的标识
			  id: 7,
			  // 禁用选项
			  // disabled: true
			},
			{
			  text: 'Audemars Piguet/爱彼',
			  id: 8
			},
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 9
			}
    ]
  },
	{
	  // 导航名称
	       text: '手提包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '单肩包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '复古包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '手提包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '单肩包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '复古包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '手提包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '单肩包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '复古包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '手提包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '单肩包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '复古包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '手提包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '单肩包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '复古包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '手提包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '单肩包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '复古包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '手提包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '单肩包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '复古包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '手提包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '单肩包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},
	{
	  // 导航名称
	       text: '复古包',
	  // 该导航下所有的可选项
	  children: [
	    {
	      // 名称
	      text: 'ALange & Sohhe/朗格',
	      // id，作为匹配选中状态的标识
	      id: 1,
	      // 禁用选项
	      // disabled: true
	    },
	    {
	      text: 'Audemars Piguet/爱彼',
	      id: 2
	    },
			 {
			  text: 'Alexander McQueen/亚利',
			  id: 3
			}
	  ]
	},


	
	],
      // 左侧高亮元素的index
      mainActiveIndex: 0,
      // 被选中元素的id
      activeId:'1'
    };
  },
		
	}
</script>

<style>
</style>
